<template>
  <div class="hot-detail" v-loading="loading">
    <!-- 头部 -->
    <Header></Header>
    <!-- 内容 -->
    <div class="hot-comment-content">
      <!-- 商品简介 -->
      <goodsBrief :brief="brief" @sendJoinCollect="getJoinCollect"></goodsBrief>
      <!-- 评价标签 数据暂时没有爬到-->
      <evaluateTags :tags="tags" @sendTagHandler="getTagHandler"></evaluateTags>
      <!-- 评价内容 -->
      <evaluateContent :evaluateList="evaluateList"></evaluateContent>
      <!-- 分页 -->
      <div class="pagination" v-if="total > 40">
        <el-pagination
          background
          :current-page = "pageNum"
          @current-change="changeCurrentPage"
          :page-sizes="[40,80]"
          @size-change="changeCurrentPageSize"
          :total = "total"
          layout="total, sizes, prev, pager, next, jumper"
        >
        </el-pagination>
        <div class="pageSearch" @click="pageSearch">确定</div>
      </div>
    </div>
  </div>
</template>

<script>
  import Header from "../components/HotCollect/Header";
  import goodsBrief from '../components/hotDetail/goodsBrief'
  import evaluateTags from '../components/hotDetail/evaluateTags'
  import evaluateContent from '../components/hotDetail/evaluateContent'
  export default {
    async fetch({store}){
      await store.commit('setInterIndex',10)
    },
    layout: 'internalouts',
    components:{
      Header,
      goodsBrief,
      evaluateTags,
      evaluateContent,
    },
    props:{
      a:{
        type:Array,
        default:() =>{
          return []
        }
      }
    },
    data () {
      return {
        //商品简介
        brief:{},
        //商品标签 
        tags:[],
        //评价内容
        evaluateList:[],
        //第一页
        pageNum:1, 
        //每页的条数
        pageSize:40, 
        //总条数
        total:0,
        //页面加载效果 
        loading:false, 
        // 评论
        evaluateList:[],
        // 评论id
        commentId:0
      }
    },
    mounted() {
      // 爆品商品详情页初始化接口
      this.hotDetail();
    },
    methods: {
      // tag标签事件
      getTagHandler(e) {
        console.log('getTagHandler',e)
        this.commentId = e;
        this.hotDetail()
      },
      // 改变当前页数
      changeCurrentPage(page){ 
        this.pageNum = page; //赋值给当前页
        this.hotDetail(); //调用商品列表接口
        this.$scrollTo()
      },
      // 改变条数
      changeCurrentPageSize(pageSize){
        this.pageNum = 1; //重新请求第一页
        this.pageSize = pageSize;  //设置条数
        this.hotDetail(); //调用商品列表接口
        this.$scrollTo()
      },
      // 点击确定按钮时候调用分页事件
      pageSearch(){
        // this.changeCurrentPage();
        // this.changeCurrentPageSize();
        this.hotDetail();//调用接口interface
        this.$scrollTo();
      },
      // 点击收藏，调用初始化接口
      getJoinCollect() {
        this.hotDetail();
      },
      // 爆品详情页
      hotDetail(){
        this.loading = true;
        // 商品ID
        let shopId = this.$route.query.id; 
        let params ={
          //页数
          pageNum:this.pageNum, 
          //每页的条数
          pageSize:this.pageSize,
          // 商品ID
          id:shopId,
          // 评论id
          goodsId:this.commentId,
        }
        this.$axios.$post('hotDetail',params).then(res => {
          this.loading = false;
          if(res.status === 200){
            this.brief = res.obj.crawGoods;
            this.total = res.obj.total;
            // 评论标签
            this.tags = res.obj.commentKey;
            // 评论内容
            this.evaluateList = res.obj.comments;
          }else{
            // this.$message.warning(res.msg);
          }
        })
        .catch(error => {
          this.$message.warning('请求失败');
          this.loading = false;
        })
      },
    },
    computed: {
    },
    watch:{
    },
    beforeDestory() {
    }
  }
</script>

<style scoped>
  .hot-detail{
    background-color: #151923;
    min-width:1200px;
    margin-top:2px;
    min-height: 100vh;
  }
  /* 内容区 */
  .hot-comment-content{
    width:1440px;
    margin:20px auto 0;
  }
  @media screen and (max-width:1440px){
    .hot-comment-content{
      width:1200px;
    }
  }
  /* 分页样式 */
  .pagination{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    padding:0 0 50px 0;
    margin-top:20px;
  }
  .pagination .pageSearch{
    width:60px;
    height:28px;
    line-height:28px;
    text-align:center;
    border-radius:15px;
    background-image:linear-gradient(to right, #0099ff,#0099ff,#05d5fc,#07edfb);
    color:#ffffff;
    font-size:14px;
    cursor:pointer;
    margin-left:10px;
    user-select:none;
    transition:all .2s ease;
  }
  .pagination .pageSearch:hover{
    background-image:linear-gradient(to left, #0099ff,#0099ff,#05d5fc,#07edfb);
  }
  /deep/ .el-pagination.is-background .el-pager li:not(.disabled).active{
    background-color: none;
    background-image:linear-gradient(to right, #0099ff,#0099ff,#05d5fc,#07edfb);
  }
  /deep/ .el-pagination.is-background .el-pager li:not(.disabled).active:hover{
    background-image:linear-gradient(to left, #0099ff,#0099ff,#05d5fc,#07edfb);
  }
</style>
